<template>
  <div v-loading="state.loading" class="container">
    <div class="handle">
      <el-input
        v-model="searchValue" 
        :placeholder="$t('goods_document.brand_name_search')"
        :suffix-icon="Search"
        clearable
        @change="init(state.certifyObj)"
      />
      <el-button link @click="init(state.certifyObj,'init')">{{ $t("merak.refresh") }}</el-button>
    </div>
    <el-table class="merak-table-container" :data="state.data" :max-height="300" scrollbar-always-on>
      <el-table-column prop="brand_id" :label="$t('goods_document.brand_id')" width="150" />
      <el-table-column prop="brand_name_cn" :label="$t('goods_document.brand_name_cn')" :width="300" />
      <el-table-column prop="brand_name" :label="$t('goods_document.brand_name')" :width="300" />
      <el-table-column :label="$t('goods_document.bind_merchants')">
        <template #default="{ row }">
          <el-scrollbar :max-height="100">
            {{ Array.isArray(row.supplier) ? row.supplier.map((item: any) => item.supplier_name).join(", ") : "" }}
          </el-scrollbar>
        </template>
      </el-table-column>
      <template #empty>
        <div v-if="state.loadedData" style="padding: 100px 40px 0">
          <img :src="EmptyPng" style="object-fit: cover; height: 130px" />
        </div>
        <div v-else></div>
      </template>
    </el-table>
  </div>
</template>

<script setup lang="ts">
import { getCurrentInstance, ref, reactive, onMounted } from "vue";

import { useRoute } from "vue-router";

import { ElInput, ElButton, ElTable, ElTableColumn, ElScrollbar } from "element-plus";
import { Search } from "@element-plus/icons-vue";

import MerakXTable, { MerakXTableInstance, MerakXTableProps } from "@/components/MerakXTable";

import { ResultEnum } from "@/enums/httpEnum";
 
import { getCertifyApi, getProductInfoApi } from "@/api/modules/goodsArchive/list/detail";
import EmptyPng from "@/assets/images/empty.png";

const props = defineProps<{
  queueId?: string;
  productId?: string|number;
}>();

const currentInstance = getCurrentInstance();

const route = useRoute();

const tableRef = ref<MerakXTableInstance>();

const searchValue = ref<string>();

const recordNum = ref(0);

const state = reactive<{
  certifyObj:object,
  loading: boolean;
  loadedData: boolean;
  data: Array<Record<string, any>>;
}>({
  certifyObj:{},
  loading: false,
  loadedData: false,
  data: []
});

const tableState = reactive<MerakXTableProps>({
  columnsByStore: [],
  columns: [
    { field: "brand_id", title: currentInstance?.proxy?.$t("goods_document.brand_id") },
    { field: "brand_name_cn", title: currentInstance?.proxy?.$t("goods_document.brand_name_cn") },
    { field: "brand_name", title: currentInstance?.proxy?.$t("goods_document.brand_name") },
    {
      field: "bind_merchants",
      title: currentInstance?.proxy?.$t("goods_document.bind_merchants"),
      slots: {
        default: ({ row }) => (Array.isArray(row.supplier) ? row.supplier.map((item: any) => item.supplier_name).join(", ") : "")
      }
    }
  ]
});
 
const init = async (certifyObj,type) => {
  //  route.query.id?.toString(), "brand", props.queueId
  state.certifyObj=certifyObj;
 state.loading = !!props.queueId ? false : true;
  await getProductInfoApi({ product_id: props.productId, goods_certify_id: certifyObj?.goods_certify_id, type: "brand" },props.queueId).then(({ code, data }) => {
    if (code == ResultEnum.SUCCESS) {
      if(type=="init"){
        searchValue.value="";
      }
      const filterValue = (searchValue.value ?? "").toLowerCase();
      recordNum.value = data.length;
      state.loadedData = true;
      state.data = data.filter(
        item =>
          (item.brand_name ?? "").toLowerCase().includes(filterValue) ||
          (item.brand_name_cn ?? "").toLowerCase().includes(filterValue)
      );
      console.log(state.data)
    }
  });
  state.loading = false;
};

onMounted(() => {
  // init({},"init")
});

defineExpose({
  reload: () => init({},"init"),
  init,
  recordNum
});
</script>

<style scoped lang="scss">
.handle {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: var(--merak-space);
  .el-input {
    width: 200px;
  }
  .el-button {
    margin: 0;
    padding: 0;
    min-width: auto;
    border: none;
    &:hover,
    &:focus {
      color: var(--el-color-primary) !important;
    }
  }
}
</style>
